<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vue -->
    <script src="../vue.js"></script>
  </head>
  <body>
    <!--vue中用{{}}来写插值语法
        插值语法中的数据(方法或属性)会在vm实例对象中的查找
        插值语法中可以写实例对象上的属性，也可以写表达式（表达式和语句的区别：表达式有返回值）
    -->
    <div id="app">
      <p>我是vue,我的值为{{num}}</p>
      <!-- ++/--会导致无限循环，因为自加自减会改变数据，vue中数据改变就会重新渲染，渲染后又会数据改变。。。。 -->
      <!-- <p>num的值为{{num++}}</p> -->
      <p>num的值为{{num+1}}</p>

      <!-- 插值语法中写表达式 -->
      <p>{{num>10?'num大于10':'num小于10'}}</p>
      <p>{{name.toUpperCase()}}</p>
      <p>{{like.join('-')}}</p>
      <!-- 数组会改变原数组的方法，导致和自加自减相同的问题 -->
    </div>
    <script>
      Vue.config.productionTip = false; //关闭vue的开发环
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            num: 13,
            name: 'lili',
            like: ['吃饭', '睡觉', '打豆豆'],
          };
        },
      });

      // 实例对象vue中的属性使用
      console.log(vm.$el);
    </script>
  </body>
</html>
